import { createFileRoute } from "@tanstack/react-router";
import { SearchIcon } from "lucide-react";
import { useId } from "react";
import { OrgCreateDialog } from "@/components/organization/orgs-create-dialog";
import { OrgsListItemCard } from "@/components/organization/orgs-list-item-card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/_app/organizations")({
	component: RouteComponent,
});

function RouteComponent() {
	const id = useId();
	return (
		<div className="p-6 h-full w-full">
			<Tabs defaultValue="involved" className="w-full h-full gap-4">
				<div className="flex items-center justify-between">
					<div className="flex items-center gap-4">
						<TabsList>
							<TabsTrigger value="involved">Involved</TabsTrigger>
							<TabsTrigger value="managed">Managed</TabsTrigger>
						</TabsList>
						<div className="relative">
							<Input
								id={id}
								className="peer ps-9 pe-9 w-md"
								placeholder="Search..."
								type="search"
							/>
							<div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 peer-disabled:opacity-50">
								<SearchIcon size={16} />
							</div>
						</div>
					</div>
					<OrgCreateDialog />
				</div>
				<TabsContent value="involved">
					<div className="grid grid-cols-4 grid-rows-5 gap-4 h-full w-full">
						<OrgsListItemCard key={id} />
					</div>
				</TabsContent>
				<TabsContent value="managed">
					<div className="grid grid-cols-4 grid-rows-5 gap-4 h-full w-full">
						<OrgsListItemCard key={id} />
					</div>
				</TabsContent>
			</Tabs>
		</div>
	);
}
